import { Selector } from "antd-mobile"
import { useState, useEffect } from "react"
import { Form } from "antd-mobile"
import InputContent from "./InputContent"
import type { ICustomerItem } from "../../interface/IlistItem"

function SelectInput(props: {name: string, label: string, editData: ICustomerItem}) {
    // console.log(props)
    const [show, setShow] = useState(false)
    useEffect(() => {
        const value = props.editData[props.name as keyof ICustomerItem];
        // 使用类型守卫检查 value 是否为数组
        if (Array.isArray(value) && value[0] === "1") {
            setShow(true)
        }
    }, []);
    return (
        <>
            <Form.Item
                name={props.name}
                label={props.label}
                rules={[{ required: true, message: '请选择' }]}
            >
                <Selector
                    style={{
                        '--border-radius': '100px',
                        '--border': 'solid transparent 1px',
                        '--checked-border': 'solid var(--adm-color-primary) 1px',
                        '--padding': '8px 24px',
                    }}
                    showCheckMark={false}
                    options={[
                        {
                            label: "有",
                            value: "1"
                        },
                        {
                            label: "无",
                            value: "2"
                        }
                    ]}
                    onChange={(value) => {
                        // console.log(value)
                        if (value[0] === "1") {
                            setShow(true)
                        } else {
                            setShow(false)
                        }
                    }}
                />
            </Form.Item>
            <InputContent show={show} name={props.name} />
        </>
    )
}
export default SelectInput